<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.27.2/axios.min.js"></script>
</head>
<body>
    <form action="#" name="form">
        <input type="text" name="advName">
        <input type="text" name="advOrder">
        <!-- type="file"  文件提交的   accept是接受文件的种类   multiple是多选-->
        <input id="file" type="file" name="advFile" accept="image/png,image/gif,image/jpeg,image/webp" multiple >
        <img id="pre" src="" alt="" width="100px">
        <button id="btn">提交</button>
    </form>
    <script>
        const oFile=document.getElementById('file')
        const oPre=document.getElementById('pre')
        const oBtn=document.getElementById('btn')

        oBtn.onclick=function(e){
            //阻止表单默认提交事件
            e.preventDefault()

            //使用formData来收集某个表单的数据  用来使用文件的上传
            //把表单数据格式转为formData格式
            const myFormData=new FormData(document.form)
            // console.log(myFormData);
            console.log(myFormData.get('advName'));
            console.log(myFormData.get('advOrder'));
            console.log(myFormData.get('advFile'));

            //向服务器提交数据  就是之前上传的图片
            axios.put('/updata',myFormData)

        }



        //change事件是表单状态发生改变并失去焦点触发
        //input事件是表单改变就会触发
        oFile.onchange=function(e){
            //既然想得到上传的文件,第一个想到的就是e,e是事件对象,所有关于当前事件的信息都在e身上
            // console.log(e);
            //在文件上传的事件中,当上传完成,在当前input对象上有一个files属性,包含了上传所有文件信息组成的数组
            console.log(this.files[0]);

            //FileReader是js提供的异步读取文件的类,和input的file配合使用,实例化以后得到一个对象,提供了很多方法可以读取文件
            const reader=new FileReader();

            //把图片读成Base64格式
            reader.readAsDataURL(this.files[0])

            //读取完毕事件
            reader.onload=function (e){
                console.log('e',e.target.result);
                oPre.src=e.target.result
            }

        }
    </script>
</body>
</html>